<template>
    <el-form :model="loginFormData" status-icon :rules="rules" ref="loginFormData" label-width="100px"
        class="demo-loginFormData">
        <el-form-item label="用户名" prop="username" class="number1">
            <el-input type="text" v-model="loginFormData.username" autocomplete="off" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginFormData.password" autocomplete="off" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha" class="captcha">
            <el-input v-model.number="loginFormData.captcha" type="text" maxlength="5"></el-input>
            <div class="captchaBox" v-html="captcha" @click="getCaptcha()" v-loading="loading"></div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginFormData')">登录</el-button>
        </el-form-item>
    </el-form>
</template >
<script>
//引入常规组件表单验证
import { validateUsername, validatePassword, validateCaptcha } from "../../utils/login/validate";
//引入发送请求的接口
import * as api from "@/api/users"
//引入存储data中需要的数据方法
import storage from "@/utils/storage"
export default {
    created() {
        this.getCaptcha()
    },
    data() {
        return {
            captcha: "",//验证码
            loading: false,
            loginFormData: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    //通过watch监听loginForm的变化
    watch: {
        /* loginFormData: {
            handler(newVal) {
                console.log(newVal);
            },
            deep: true
        } */
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //登录逻辑
                    //1.获取后台校验码
                    //2.进行本地校验
                    //3.本地校验通过=>先校验验证码
                    //4.验证码通过再校验用户名和密码
                    //5.成功和失败
                    //本地校验通过
                    let { username, password } = this.loginFormData
                    let res = api.loginApi(username, password)
                    api.verifyCaptchaApi(this.loginFormData.captcha.toLowerCase())
                        .then(async res => {
                            if (res.data.state) {
                                //验证码通过，校验用户名和密码
                                let { username, password } = this.loginFormData
                                let res = await api.loginApi(username, password)
                                if (res.data.state) {
                                    //存储用户信息到本地
                                    console.log(res.data);
                                    this.storageUserInfo(res.data)
                                    // console.log(storage.get);
                                    // 跳转到主页
                                    this.$router.push("/")
                                }
                            } else {
                                //校验验证码不通过 刷新验证码
                                // this.getCaptcha()
                            }
                        })
                    console.log(this.loginFormData.captcha);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //封装一个获取验证码的方法
        getCaptcha() {
            //打开加载动画
            this.loading = true
            api.getCaptchaApi()
                .then(res => {
                    this.captcha = res.data.img
                    //关掉加载动画
                    this.loading = false
                })
        },
        //封装一个方法，用用于存储用户信息、token和按钮权限
        storageUserInfo({ userInfo, token, permission }) {
            //将信息存到vuex
            this.$store.commit('users/SET_USERINFO', userInfo)
            storage.set('userInfo', userInfo)
            storage.set('token', token)
            storage.set('permission', permission)
            let r = storage.get('userInfo')
            console.log(r);
        }

    }
}
</script>

<style lang="less" scoped>
/* 
1.打开调试器，找准类名，覆盖样式
2.看权重，使用！important
3.使用深度选择器 /deep/ 
*/

// 设置表单样式
//最外层的表单
.el-form {

    // 设置label标签颜色
    /deep/ .el-form-item__label {
        color: white
    }

    //设置内层所有输入框，，，设置宽度
    .el-input {
        width: 200px;
    }

    //内层第一个输入框，使之距离顶部50px
    .number1 {
        margin-top: 50px;
    }
}

//短信验证码的样式
.captcha {

    //最大的input框
    /deep/ .el-form-item__content {
        display: flex;

        // 输入框的宽度
        .el-input {
            width: 90px;

            // 去除输入框的默认样式
            .el-input__inner {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right: 0;
                box-shadow: none;
            }
        }

        .captchaBox {
            box-shadow: none;
            margin-top: 0.8px;
            height: 38px;
            width: 109px;
            transition: var(--el-transition-box-shadow);
            background-color: white;
            border: 1px solid #DCDFE6;
            border-left: 0;
            border-radius: 0 4px 4px 0;
            cursor: pointer;

            svg {
                height: 40px;
                width: 110px;
            }
        }
    }
}
</style>
